.homePage{
    width: 100%;
    height: 100%;
    display: flex;
    .middle{
        flex: 1;
        height: 100%;
    }
    .item1{
        height: 2.97rem;
        margin-bottom: 0.6rem;
        .item1Content{
            margin-top: 0.35rem;
            margin-left:0.23rem;
            .tab{
                width: 2.38rem;
                height: 1rem;
                margin-right: 0.2rem;
                margin-bottom: 0.2rem;
                // display: inline-block;
                float: left;
                img{
                    width: 100%;
                    height: 100%;
                }
                .tabContent{
                    padding-right: 0.2rem;
                    display: flex;
                    flex-direction: column;
                    align-items: self-end;
                    justify-content: space-evenly;
                    height: 100%;
                    .tabContentTitle{
                        font-size: 0.205rem;
                    }
                    .tabContentInfo{
                        font-size: 0.274rem;
                    }
                }
            }
            .pelpleTab1{
                background: url("@/assets/images/home/people1.png") no-repeat;
                background-size: 100% 100%;
            }
            .pelpleTab2{
                background: url("@/assets/images/home/people2.png") no-repeat;
                background-size: 100% 100%;
            }
            .pelpleTab3{
                background: url("@/assets/images/home/people3.png") no-repeat;
                background-size: 100% 100%;
            }
            .pelpleTab4{
                background: url("@/assets/images/home/people4.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .item2{
        height: 3.57rem;
        margin-bottom: 0.6rem;
        .item2Content{
            margin-top: 0.35rem;
            margin-left:0.23rem;
        }
        /* .ringChartDiv{
            height: 40%;
            .left{
                display: inline-block;
                width: 50%;
                margin-left: -15px;
            }
            .right{
                display: inline-block;
                width: 50%;
                .title{
                    background: linear-gradient(to right, rgba(1,105,181,1), rgba(1,105,181,0));
                    font-size: 7px;
                    padding: 5px;
                }
                .number{
                    font-size: 12px;
                    color: #ff9959;
                    margin: 10px;
                    font-style: italic;
                }
            }
        } */
    }
    .item3{
        height: 3rem;
        .item3Content{
            margin-top: 0.35rem;
            margin-left:0.23rem;
            .tab{
                width: 2.38rem;
                height: 1rem;
                margin-right: 0.2rem;
                margin-bottom: 0.2rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-left: 0.3rem;
                float: left;
                .trafficTitle{
                    font-size: 0.256rem;
                }
                .trafficNum{
                    font-size: 0.43rem;
                    span{
                        font-size: 0.2rem;
                        color: #00BCFF;
                    }
                }
            }
            .tab1{
                background: url("@/assets/images/home/trafficBlue.png") no-repeat;
                background-size:100% 100%;
                .trafficNum{
                    color: #00BCFF;
                }
            }
            .tab2{
                background: url("@/assets/images/home/trafficGreen.png") no-repeat;
                background-size:100% 100%;
                .trafficNum{
                    color: #11DDC6;
                }
            }
        }
    }
    .left{
        width: 5.45rem;
        // margin-top: 0.48rem;
        // margin-left: 0.7rem;
        .item2{
            .item2Content{
                .ringChartDiv{
                    height: 1.26rem;
                    margin-bottom: 0.325rem;
                    display: flex;
                    align-items: center;
                    .left{
                        height: 100%;
                        width: 1.26rem;
                        margin: 0;
                        display: inline-block;
                    }
                    .right{
                        margin: 0;
                        display: inline-block;
                        width: 3.41rem;
                        img{
                            width: 3.41rem;
                            height: 0.475rem;
                        }
                    }
                }
            }
        }
    }
    .right{
        float: right;
        width: 5.45rem;
        // margin-top: 0.48rem;
        // margin-right: 0.7rem;
        .item1{
            height: 4.1rem;
            .item1Content{
                height: 3.36rem;
                .row-item{
                    background: url("@/assets/images/home/tableBg.png") no-repeat !important;
                    background-size:100% 100%;
                    padding-left: 0.4rem;
                    .cell{
                        padding: 0 !important;
                    }
                }
            }
        }
        .item2{
            height: 2.44rem;
            .item2Content{
                margin-top: 0.25rem;
                .tab1{
                    width: 2.6rem;
                    height: 1rem;
                    float: left;
                    background: url("@/assets/images/home/EconomyBg1.png") no-repeat;
                    background-size:100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                .tab2{
                    width: 2.6rem;
                    height: 1.2rem;
                    float: left;
                    background: url("@/assets/images/home/EconomyBg2.png") no-repeat;
                    background-size:100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                .tabRight{
                    margin-right: 0.02rem;
                }
                .economyTitle{
                    font-size: 0.2rem;
                }
                .economyNum{
                    font-size: 0.3rem;
                    color: #66D8FF;
                }
                .economyRate{
                    color: #FF2526;
                    font-size: 0.2rem;
                    display: flex;
                    img{
                        width: 0.275rem;
                    }
                }
            }
        }
        .item3{
            .item3Content{
                height: 2.5rem;
                background: url("@/assets/images/home/emergencyBg.png") no-repeat;
                background-size:100% 100%;
                // .line{
                //     height: 1px;
                //     background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #6C9EFF 53%, rgba(255,255,255,0.01) 100%);
                //     opacity: 0.68;
                // }
                .emergencyUl{
                    width: 100%;
                    display: flex;
                    height: 1.25rem;
                    align-items: center;
                    li{
                        width: calc(100% / 3);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .emergencyTitle{
                            font-size: 0.2rem;
                        }
                        .emergencyNmu{
                            font-size: 0.3rem;
                        }
                    }
                }
                .emergencyUlWarn{
                    .emergencyNmu{
                        color: #FE564D;
                    }
                }
            }
        }
    }
}